<script setup lang="ts"></script>
 <template>
 <div class="content">
<h1 class="list_tit">商品列表</h1>
 <div class="good_type">
 <p>女装</p>
 <p>男装</p>
 <p>手机</p>
 <p>电脑</p>
 <p>运动</p>
 </div>
 <div class="list">
 <div class="list_ul">
 <div class="list_li">
 <div class="li_img">商品图片</div>
 <p>懒人小沙发</p>
 <span>舒适休闲，完善支撑</span>
 <h3>126.4<span class="isHot">热销</span></h3>
 </div>
 <div class="list_li">
 <div class="li_img">商品图片</div>
 <p>减压弹力球</p>
 <span>释放压力，放松身心</span>
 <h3>95.2</h3>
 </div>
 <div class="list_li">
 <div class="li_img">商品图片</div>
 <p>简约一字发夹</p>
 <span>简约设计，百搭款式</span>
 <h3> 15.9 </h3>
 </div>
 <div class="list_li">
 <div class="li_img">商品图片</div>
 <p>毛线小兔子耳朵发夹</p>
 <span>可爱萌趣，精致做工</span>
 <h3>12.7</h3>
 </div>
 <div class="list_li">
 <div class="li_img">商品图片</div>
 <p>懒人小沙发</p>
 <span>舒适休闲，完善支撑</span>
 <h3>126.4<span class="isHot">热销</span></h3>
 </div>
 <div class="list_li">
 <div class="li_img">商品图片</div>
 <p>减压弹力球</p>
 <span>释放压力，放松身心</span>
 <h3>95.2</h3>
 </div>
 <div class="list_li">
 <div class="li_img">商品图片</div>
 <p>简约一字发夹</p>
<span>简约设计，百搭款式</span>
 <h3>15.9></h3>
 </div>
 <div class="list_li">
 <div class="li_img">商品图片</div>
 <p>毛线小兔子耳朵发夹</p>
 <span>可爱萌趣，精致做工</span>
 <h3>12.7</h3>
 </div>
 </div>
 </div>
 </div>
 </template>
 <style scoped>
 .content{
 padding-bottom:300px;
 }
 .good_type{
 display: flex;
 justify-content:start;
 width:1280px;
 margin:30pxauto50px;
 border-bottom:2pxsolid#ccc;
 }
 .good_typep{
 width:100px;
 line-height:40px;
 text-align:center;
 cursor: pointer;
 }
 .good_typep:hover{
 background:#f2f2f2;
 }
 .list_tit{
 width:1280px;
 margin:30pxauto50px;
 display: flex;
 justify-content:center;
 }
 .list{
 width:100%;
 display: flex;
 justify-content:center;
 position:relative;
 }
 .list_ul{
 width:1280px;
 height:300px;
 display: flex;

flex-wrap:wrap;
 justify-content:space-between;
 align-items:center;
 }
 .list_li{
 position:relative;
 width:300px;
 height:100%;
 box-shadow: 2px2px10px#ddd;
 text-align:left;
 margin-bottom:20px;
 cursor: pointer;
 }
 .li_img{
 width:100%;
 height:200px;
 text-align:center;
 line-height:200px;
 background:#ABE1CC;
 }
 .list_li p{
 font-size:18px;
 line-height:30px;
 }
 .list_li span{
 display:block;
 font-size:14px;
 color:#888;
 }
 .list_li h3{
 font-size:28px;
 color:#CF4444;
 line-height:60px;
 }
 .list_li .isHot{
 position: absolute;
 width: 50px;
 height: 30px;
 text-align:center;
 line-height:30px;
 background:#CF4444;
 border-radius: 10px;
 bottom: 30px;
 right: 10px;
 color: yellow;
 font-family:"宋体"
 }
 </style>